// data-set 可以按需引入，除此之外不要引入别的包
import React from 'react';
import { Chart, Axis, Coord, Geom, Guide, Shape } from 'bizcharts';
import numeral from 'numeral';

const { Html, Arc } = Guide;

class Gauge extends React.Component {
  render() {
    const {
      maxValue = 100,
      currentValue = 56,
      height,
      forceFit = true,
      color = '#2F9CFF',
      bgColor = '#FACC12',
    } = this.props;
    const cols = {
      value: {
        min: 0,
        max: maxValue,
        tickInterval: 0,
        nice: false,
      },
    };
    const data = [{ value: currentValue }];
    const newHeight = height || 88;
    const totalCustomer = numeral(maxValue).format('0,000');
    const companyCustomer = numeral(currentValue).format('0,000');
    return (
      <Chart height={newHeight} data={data} scale={cols} padding={[0, 0, 0, 0]} forceFit={forceFit}>
        <Coord type="polar" startAngle={-Math.PI} endAngle={0} radius={0.9} />
        <Axis name="value" zIndex={6} line={null} label={null} />
        <Axis name="1" visible={false} />
        <Guide>
          <Arc
            zIndex={0}
            start={[0, 0.965]}
            end={[maxValue, 0.965]}
            style={{
              stroke: bgColor,
              lineWidth: 16,
            }}
          />
          <Arc
            zIndex={1}
            start={[0, 0.965]}
            end={[data[0].value, 0.965]}
            style={{
              stroke: color,
              lineWidth: 16,
            }}
          />
        </Guide>
        <Geom type="path" position="value*1" shape="pointer" hide={true} size={0} />
      </Chart>
    );
  }
}
export default Gauge;
